.homepage .mockup{
    width: 710px;
    height: 446px;
    position: absolute;
    bottom: -200px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    background: url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/monitor.svg);
    background-size: 100%;
    z-index: 2;
    transition: all 1s ease-in-out;
    box-shadow: rgba(0,0,0,.8) 0 0 60px;
    border-radius: 25px 25px 0 0;
    -moz-border-radius: 25px 25px 0 0;
    -webkit-border-radius: 25px 25px 0 0;
}
.homepage .mockup.raw {
    width: 654px;
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
}
.homepage .mockup:hover{
    bottom: -90px;
}
.homepage .mockup .bars{
    position: absolute;
    width: 655px;
    height: 24px;
    background: url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/header.svg) #203038 left top no-repeat;
    background-size: 100%;
    top: 30px;
    right: 25px;
    z-index: 3;
}
.homepage .mockup.raw .bars {
    position: absolute;
    top:0;
    right:0;
    width: 655px;
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
}
.homepage .mockup .bars:before{
    content:'';
    position: absolute;
    width: 30px;
    height: 340px;
    background: url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/toolbar.svg) left top no-repeat;
    background-size: 100%;
    top: 0;
    right: 0;
    z-index: 4;
}
.homepage .mockup.raw .bars:before{
    height: 370px;
    -webkit-border-radius: 0 3px 0 0;
    -moz-border-radius: 0 3px 0 0;
    border-radius: 0 3px 0 0;
}
.homepage .mockup .bars:after{
    content: '';
    position: absolute;
    width: 124px;
    height: 340px;
    background: url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/designpanel1.png) left top no-repeat;
    background-size: 124px auto;
    top: 0;
    right: 29px;
    z-index: 3;
    -webkit-transition: background-position 1s ease-in-out;
    transition: background-position 1s ease-in-out;
    -webkit-animation: editpanel 16s 2s infinite;
    animation: editpanel 16s 2s infinite;
}
.homepage .mockup.collage .bars:after{
    -webkit-animation: none;
    animation: none;
}
.homepage .mockup:hover .bars:after{
    background-position:right -125px top;
}
/*mockup collage*/
.homepage .mockup.collage:before{
    content: none;
}
.homepage .mockup.collage .pg{
    position: absolute;
    top:54px;
    left:30px;
    right:30px;
    bottom:54px;
    background: #fff;
    overflow: hidden;
}
.homepage .mockup.collage.raw .pg {
    top: 0;
    left: 0px;
    right: 0;
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
}
.homepage .mockup.collage .hdr{
    height: 300px;
    background: url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/mckp_bg1.jpg);
    display: table;
    width: 100%;
    position: relative;
}
.homepage .mockup.collage .hdr:after{
    content: "";
    position:absolute;
    top:0;
    right:0;
    bottom: 0;
    left:0;
    background: rgba(0,0,0,.5);
}
.homepage .mockup.collage .hdr .centered{
    position: relative;
    z-index: 1;
    transition:all 0.2s ease-in-out;
}
.homepage .mockup.collage .hdr .centered span.chng{
    position:absolute;
    top:5px;
    left:5px;
    font-size: 6px;
    color:rgba(255,255,255,.8);
    background: rgba(0,0,0,.3);
    padding:4px 8px;
    border-radius: 3px;
    font-weight: 100;
}
.homepage .mockup.collage .hdr .centered span.av{
    display: block;
    width:40px;
    height:40px;
    margin:0 auto 15px auto;
    background: #ddd;
    border:2px solid rgba(255,255,255,.5);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 6px;
    color:#aaa;
    padding-top: 10px;
}
.homepage .mockup.collage .hdr .centered p.title{
    font-weight: bold;
    margin-bottom: 0;
    font-size: 22px;
}
.homepage .mockup.collage .hdr .centered p.subtitle{
    margin-bottom: 0;
    font-size: 12px;
}
.homepage .mockup.collage .hdr .centered p.subtitle:after{
    content: "";
    background: #fff;
    width:30px;
    height:1px;
    display: block;
    margin:10px auto 0 auto;
}
.homepage .mockup.collage .hdr .centered p.inf{
    margin: 10px auto 0 auto;
    font-size: 8px;
    width: 200px;
}
.homepage .mockup .wrp {
    position: relative;
    transition: transform 2s ease-in-out;
}
.homepage .mockup:hover .wrp {
    transform:translateY(-200px);
}

.info.homeicons{
    height:23%;
    width:100%;
    background: #fff;
    display: table;
    padding:20px 0;
    z-index:10;
}
.info.homeicons p{
    margin: 0!important;
}
.info.homeicons li{
    margin-bottom:0!important;
    padding-bottom:0!important;
}
.homeicons img{
    height:35px;
    width:35px;
    margin-bottom: 15px;
}
.homeicons.new img{
    height:45px;
    width:auto;
    margin-bottom: 15px;
}
.homeicons.sx article, .homeicons.sx li, .tools article,.tools ul li{
    padding-left:110px;
    margin-bottom:20px;
}
.tools h3.xl.line{
    margin-bottom: 50px!important;
}
.tools ul li:first-child{
    background: url('https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/icocustomize.svg') 35px 5px no-repeat;
    background-size: 42px auto;
}
.tools ul li:nth-child(2){
    background: url('https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/icotckt.svg') 35px 5px no-repeat;
    background-size: 44px auto;
}
.tools ul li:nth-child(3){
    background: url('https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/icoenvelope.svg') 40px 5px no-repeat;
    background-size: 37px auto;
}
.tools ul li:nth-child(4){
    background: url('https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/icochecklist.svg') 40px 5px no-repeat;
    background-size: 37px auto;
}
.tools ul li:nth-child(5){
    background: url('https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/icolist.svg') 40px 5px no-repeat;
    background-size: 37px auto;
}
.tools ul li:nth-child(6){
    background: url('https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/icoprivacy.svg') 40px 5px no-repeat;
    background-size: 37px auto;
}
.tools ul li:nth-child(7){
    background: url('https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/icosocial.svg') 40px 5px no-repeat;
    background-size: 30px auto;
}
.tools ul li:nth-child(8){
    background: url('https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/icodsgn.svg') 40px 5px no-repeat;
    background-size: 37px auto;
}

.tools ul li:last-child{
	background: url('https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/icocards.svg') 35px 5px no-repeat;
	background-size: 45px auto;
}

.tools.pro ul li:first-child{
    background: url('https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/icoenvelope.svg') 40px 5px no-repeat;
    background-size: 37px auto;
}
.tools.pro ul li:nth-child(3){
    background: url('../img/icons/icobadge.svg') 40px 5px no-repeat;
    background-size: 38px auto;
}
.tools.pro ul li:nth-child(6){
    background: url('../img/icons/icoshapes.svg') 40px 5px no-repeat;
    background-size: 45px auto;
}
.tools li div.relative, .tools li.relative div{
    padding-right: 5px;
}

.tools li.relative:after{
    content:"";
    border: 1px solid #32a7c6;
    border-radius: 3px;
    position:absolute;
    top:-10px;
    left:15px;
    right:0;
    bottom:0;
    z-index:-1;
}

body{
    overflow-x:hidden;
}

/** devices **/
.long > section.info.devices{
    z-index:11;
}
.devices img{
    display: block;
    position:relative;
    margin:50px auto -120px auto;
    min-width:150px;
    height:auto;
    width:90%;
}
.devices.right img{
    width:100%;
}
.devices img.center{
    max-width: 620px
}
.devices .appbadges img{
    width: auto;
    display: inline-block;
    margin: 0 5px 0 0;
    min-width: 0;
    height: 40px;
}
.devices.bg{
    background-image: url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/android.png);
    background-repeat: no-repeat;
    background-position: -20px 68px;
    background-size: 300px auto;
    position:relative;
    z-index: 1;
}
.devices.bg:after{
    content: "";
    background-image: url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/iphone.png);
    background-repeat: no-repeat;
    background-position: right -35px bottom 60px;
    background-size: 300px auto;
    position:absolute;
    width:100%;
    height:100%;
    z-index: 0;
    top:0;
    left:0;
}
/** events **/
.bg-color-0 .mix .panel, .bg-color-0 .explore .info {
    /*background: #F0F5F6;*/
}
/*.dash .info{
    top:7px;
}
.wrapinfo.v2{
    padding-left:50px;
}
.mix div.date{
    position: absolute;
    width: 59px;
    left: 0;
    top: 50%;
    text-align: center;
    z-index: 4;
    transform: translateY(-44%);
}
.dash .explore .info i.cal{
    padding:5px 0;
}
.mix div.date span.day{
    display: block;
    font-style: normal;
    font-weight:100;
    font-size:25px;
    margin-top:25px;
}
.mix div.date span.month{
    font-style: normal;
    text-transform: uppercase;
}

.dash .info i.hashtag{
    display: inline-block;
    width:auto;
    margin-right: 5px;
    color: #a5a5a5;
    padding-top: 0;
    font-style: normal;
    line-height: 10px;
}
.ellipsis > .hashtag:first-child{
    float:left;
    width: auto;
}

.mix span.tag-date{
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255,255,255,.9);
    z-index: 1;
    width: 109px;
    padding: 5px 15px;
    border-radius: 0 0 3px 0;
    white-space: normal;
    font-style: normal;
    font-size:12px;
}
.mix span.tag-date i{
    font-style: normal;
    display: block;
    font-size: 12px;
    text-align: center;
}
.mix span.tag-date i:last-child{
    border-top: 1px solid #ccc;
}

.dt{
    margin:5px;
    padding:5px 0;
}

.dt.to{
    border-top: 1px solid #eee;
}

.mix .dt:first-child i{
    color: #32a7c6;
}

.dash .explore .mix .dt i:first-child{
    font-size: 20px;
    display: block;
    text-align: center;
}
.dash .explore .mix .dt i:last-child{
    font-size: 13px;
    line-height: 13px;
    display: block;
    text-align: center;
    font-weight: 100;
    text-transform: uppercase;
}
/** form **/

.postfix.button{
    width:100%;
    border-radius:0 3px 3px 0;
    left:-2px;
    border:1px solid #32a7c6!important;
    background: #32a7c6!important;
    color:#fff!important;
    font-weight: normal;
}
.postfix.button:hover{
    background: #0077ab!important;
    border-color: #0077ab!important;
}

.info.blue-2.bckimg{
    background: url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/blurred_bg.jpg) no-repeat;
    background-size: cover!important;
    background-attachment: fixed;
}
.bckimg:before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(22,63,80,.6);
}
.auth_dialog input{
    width: 100%;
    min-width: 100%;
}
.auth_dialog input[type= radio]{
    width: auto;
    min-width: 0;
}
.pd0 .auth_dialog{
    min-height:300px;
}
.pd0 .auth_dialog span.o{
    color:#fff;
}
.pd0 .auth_dialog span.o:before,
.pd0 .auth_dialog span.o:after{
    background-color:#fff;
}
a.btn-facebook{
    background-color: #3b5998;
    display: block;
    width:100%;
    color:#fff;
    line-height: 40px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
}
a.btn-linkedin{
    background-color: #007bb6;
    display: block;
    width:100%;
    color:#fff;
    line-height: 40px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
}
a.btn-google{
    background-color: #dd4b39;
    display: block;
    width:100%;
    color:#fff;
    line-height: 40px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
}
.auth_dialog .social a {
    transition:opacity ease-in-out .2s;
}
.auth_dialog .social a:hover {
    opacity: .8;
}
.bckimg input,
.bckimg button,
.bckimg .btn-facebook,
.bckimg .btn-linkedin,
.bckimg .btn-google{
    box-shadow: rgba(0,0,0,.3) 0 3px 10px;
}
/*slick*/

section.info.exemples{
    padding:50px 0;
}
.focustitle{
    position: absolute;
    top: 25px;
}
.exemples .slick-slide h3{
    margin-top: 50px;
}
.exemples .slick-slide p{
    margin-right: 50px;
}

.exemples .slick-slide img{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: rgba(0,0,0,.4) 0px 4px 10px 0px;
    -moz-box-shadow: rgba(0,0,0,.4) 0px 4px 10px 0px;
    box-shadow: rgba(0,0,0,.4) 0px 4px 10px 0px;
    margin: 10px 0;
}

.exemples ul.slick-dots {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}

.exemples.blue-1 ul.slick-dots li {
     float: left;
}

.exemples ul.slick-dots li button{
    color:transparent;
    background-size: 35px auto!important;
    width:60px;
    height:60px;
    border:none;
    padding:0;
    margin-bottom:5px;
}

.exemples.blue-1 ul.slick-dots li:not(.slick-active) button{
    opacity: .5;
}   

.exemples.blue-1 ul.slick-dots li:first-child button{
    color:transparent;
    background: url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/icoconf-w.svg) center center no-repeat;

}
.exemples.blue-1 ul.slick-dots li:first-child.slick-active button{
    background: url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/icoconf-w.svg) center center no-repeat;
}
.exemples.blue-1 ul.slick-dots li:nth-child(2) button{
    color:transparent;
    background: url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/icoacademy-w.svg) center center no-repeat;

}
.exemples.blue-1 ul.slick-dots li:nth-child(2).slick-active button{
    background: url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/icoacademy-w.svg) center center no-repeat;
}
.exemples.blue-1 ul.slick-dots li:nth-child(3) button{
    color:transparent;
    background: url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/icoglass-w.svg) center center no-repeat;

}
.exemples.blue-1 ul.slick-dots li:nth-child(3).slick-active button{
    background: url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/icoglass-w.svg) center center no-repeat;
}
.exemples.blue-1 ul.slick-dots li:nth-child(4) button{
    color:transparent;
    background:  url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/iconote-w.svg) center center no-repeat;
}
.exemples.blue-1 ul.slick-dots li:nth-child(4).slick-active button{
    background: url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/iconote-w.svg) center center no-repeat;
}

/*** NEW HOME STUFF ***/


ul.menu-right{
    position: absolute;
    right:190px;
}
.homepage .img-3-q.text-left{
    background-image: url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/kitchen-bg.jpg);
    min-height: 600px;
}
.homepage .mockup.right.raw{
    right: 0;
    left: auto;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
    bottom:-30px;
    background:none;
    width:700px;
    height:500px;
    z-index: 100;
}
.homepage .mockup.right:hover{
    bottom:0px;
}
.homepage .mockup.right.raw .bars{
    width: 700px;
}
.homepage .mockup.right.raw .bars:before{
    background-color: #1F3038;
    height:500px;
}
.homepage .mockup.right.raw .bars:after{
    background-image: url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/designpanel-new.jpg);
    height:500px;
}
.homepage .mockup.collage.right .hdr{
    height:350px;
    background-size: 700px;
    background-image: url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/kitchen-bg.jpg);
}
.homepage .mockup.right.collage .pg{
    bottom:0;
}
.homeicons.text-center li{
    position: relative;
}

.homeicons.text-center li h3{
    margin-bottom: 0;
}

.homeicons.text-center li:nth-child(3) img{
    margin-left: -12px;
}
.homeicons.new.text-center li:nth-child(3) img{
    margin-left: 0px;
}
.homeicons.text-center li:not(:last-child):after{
    content:"\f061";
    color: #163F50;
    font-family: fontAwesome;
    position: absolute;
    right:0;
    top: 50%;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
}

.bg-img-fixed-left{
    position: absolute;
    width: 580px;
    top: 0;
}
.bg-img-fixed-right{
    position: absolute;
    width: 700px;
    bottom: -20px;
    right:-10px;
}

section.logo {
    padding: 30px 0;
}

section.info.logo img{
    width: auto;
}
section.logo img{
    height: 30px;
}
section.logo img:first-child,
section.logo img:nth-child(2),
section.logo img:nth-child(4),
section.logo img:nth-child(5),
section.logo img.small{
    height: 20px;
}
section.logo img{
    margin:10px 30px 30px 30px;
}

section.logo li img{
    height:30px!important;
}

section.logo li img.bigger{
    height:45px!important;
    position:relative;
    top:-12px;
}

section.logo.info h3 {
    border-bottom: 3px solid #f5f5f5;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

/** FEATURES **/


.landing section.feat{
    background: url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/create_bg2.jpg) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position:relative;
    z-index:0;
}
.landing section.feat:before,
.landing section.gradient:before,
.landing section.img-full:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(22,63,80,.7);
    background: -webkit-linear-gradient(top, rgba(22,63,80,.8) 8%, rgba(0,114,142,.7)); 
    background: -o-linear-gradient(bottom, rgba(22,63,80,.8) 8%, rgba(0,114,142,.7)); 
    background: -moz-linear-gradient(bottom, rgba(22,63,80,.8) 8%, rgba(0,114,142,.7));
    background: linear-gradient(to bottom, rgba(22,63,80,.8) 8%, rgba(0,114,142,.7));
}
.landing section.feat.opaque:before,
.landing section.gradient.opaque:before {
    background: rgba(22,63,80,1);
    background: -webkit-linear-gradient(top, rgba(22,63,80,1) 8%, rgba(0,114,142,1)); 
    background: -o-linear-gradient(bottom, rgba(22,63,80,1) 8%, rgba(0,114,142,1)); 
    background: -moz-linear-gradient(bottom, rgba(22,63,80,1) 8%, rgba(0,114,142,1));
    background: linear-gradient(to bottom, rgba(22,63,80,1) 8%, rgba(0,114,142,1));
}

img.headerimg{
    max-width: 680px;
    height:auto;
    position:relative;
    margin-top:10px;
    margin-bottom: -120px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 6px 49px 0 rgba(0,0,0,.5);
    -moz-box-shadow: 0 6px 49px 0 rgba(0,0,0,.5);
    box-shadow: 0 6px 49px 0 rgba(0,0,0,.5);
}

img.shadow{
    -webkit-box-shadow: 0 6px 49px 0 rgba(0,0,0,.5);
    -moz-box-shadow: 0 6px 49px 0 rgba(0,0,0,.5);
    box-shadow: 0 6px 49px 0 rgba(0,0,0,.5);
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    position: relative;
}
.clearmrgnbtm{margin-bottom: 0!important;}
.gradientleft:after{
    content:'';
    position:absolute;
    top:-30px;
    left:-40px;
    right:0;
    bottom:-40px;
    z-index: 2;
    background: none; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #fff 8%, rgba(255,255,255,0)); 
    background: -o-linear-gradient(right, #fff 8%, rgba(255,255,255,0)); 
    background: -moz-linear-gradient(right, #fff 8%, rgba(255,255,255,0));
    background: linear-gradient(to right, #fff 8%, rgba(255,255,255,0)); 
}

.bg-color-2 .gradientleft:after{
    background: -webkit-linear-gradient(left, #F3F5F6 8%, rgba(240,245,246,0)); 
    background: -o-linear-gradient(right, #F3F5F6 8%, rgba(240,245,246,0)); 
    background: -moz-linear-gradient(right, #F3F5F6 8%, rgba(240,245,246,0));
    background: linear-gradient(to right, #F3F5F6 8%, rgba(240,245,246,0)); 
}
.gradientbtm:after{
    content:'';
    position:absolute;
    top:100px;
    left:-30px;
    right:-30px;
    bottom:-42px;
    z-index: 2;
    background: none; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(bottom, #fff 15%, rgba(255,255,255,.99) 20%, rgba(255,255,255,0)); 
    background: -o-linear-gradient(top, #fff 15%, rgba(255,255,255,.99) 20%, rgba(255,255,255,0)); 
    background: -moz-linear-gradient(top, #fff 15%, rgba(255,255,255,.99) 20%, rgba(255,255,255,0));
    background: linear-gradient(to top, #fff 15%, rgba(255,255,255,.99) 20%, rgba(255,255,255,0)); 
}
.gradientbtm.color-2:after{
    background: none; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(bottom, #F3F5F6 15%, rgba(240,245,246,.99) 20%, rgba(240,245,246,0)); 
    background: -o-linear-gradient(top, #F3F5F6 15%, rgba(240,245,246,.99) 20%, rgba(240,245,246,0)); 
    background: -moz-linear-gradient(top, #F3F5F6  15%, rgba(240,245,246,.99) 20%, rgba(240,245,246,0));
    background: linear-gradient(to top, #F0F5F6 15%, rgba(240,245,246,.99) 20%, rgba(240,245,246,0)); 
}
img.tools{
    max-width: 430px;
    min-width: 100px;
    z-index: 3;
    right: -45px;
    position: absolute;
    bottom: -154px;
}   

ul.features{
    list-style: none;
    list-style: none;
    margin: 0 0 0 -20px;
    padding:0;
    z-index: 4;
    position: relative;
}

ul.features li{
    position: relative;
    margin:40px 0 0 0;
    clear: both;
}
ul.features.long li{
    margin:90px 0 0 0;
}

ul.features.long li:nth-child(3){
    margin-top:160px;
}

ul.features li:after{
    content: '';
    background: #33A7C6;
    height: 2px;
    width: 110px;
    position: absolute;
    top: 42px;
    left: -139px;
}

ul.features li:before{
    content: '';
    background: #33A7C6;
    height: 12px;
    width: 12px;
    position: absolute;
    top: 37px;
    left: -151px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

ul.features.long li:after,ul.features.long li:nth-child(2):after,ul.features.long li:nth-child(3):after{
    width: 330px;
    left: -350px;
    height:0px;
    border: 1px solid #33A7C6;
}

ul.features.long li:before,ul.features.long li:nth-child(2):before,ul.features.long li:nth-child(3):before{
    left: -360px;
}

ul.features li:nth-child(2):after{
    width: 204px;
    left: -233px;
}

ul.features li:nth-child(2):before{
    left: -245px;
}

ul.features li:nth-child(3):after{
    width: 83px;
    left: -113px;
}

ul.features li:nth-child(3):before{
    left: -125px;
}

img.featico{
    max-width:100px; 
    display: inline-block; 
    margin: 0 auto;
}

img.featiphone{
    max-width:265px;
    min-width:180px;
}

.compare .blue-1{
    padding:14px;
    clear:both;
}
.compare .sliderwrap{
    background: none;
    padding-right:0;
    padding-left:0;
}
.compare .sliderwrap span.minmax:first-child{
    position:absolute;
    left:0;
    top:40px;
    color: #163F50;
    font-size: 18px;
    font-weight: 600;
}
.compare .sliderwrap span.minmax:nth-child(2){
    position:absolute;
    right:0;
    top:40px;
    color: #163F50;
    font-size: 18px;
    font-weight: 600;
}
.compare .sliderwrap span.minmax i{
    font-style: normal;
}
.sliderwrap span.tooltipSlider{
    left:50%;
    transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
    -webkit-transform:webkit-translateX(-50%);
    -moz-transform:translateX(-50%);
}
.blue-1 small{
    color:#fff;
}
.fee p.b{
    color: #163F50;
    line-height: 46px;
    margin: 30px 0 0 0;
}
.compare h5,.compare h4{
    display: table;
    clear:both;
    margin: 6px auto;
    padding: 6px 0;
    width: 95%;
    max-width: 450px;
    border-top: 1px solid #fff;
}
.compare h5:first-child,
.compare h4:first-child{
    border: none;
}
.compare h5 span,.compare h4 span {
    display: table-cell;
    text-align: right;
    padding: 0;
    width: 23%;
    vertical-align: bottom;
}
.compare h5 small{
    line-height: normal;
}
.compare h5 span:first-child,.compare h4 span:first-child  {
    text-align: left;
    width: 30%;
}

.compare .price:not(.min):not(.max),
.compare .quantity:not(.min):not(.max) {
    margin: 10px auto 0px auto;
}
.info.fee{
    z-index:14!important;
}

/** PRO **/

.icon-list li{
    padding-right: 10px;
}

span.disabled{
    opacity: .2;
}
.label.label-outlined{
    background-color: transparent;
    color: #31a5c3;
    border:1px solid #31a5c3;
}
.label.label-outlined.g{
    background-color: transparent;
    color: #ccc;
    border-color:#ccc;
}
.lbl-b{
    border:1px solid #32a7c6;
    font-size: 13px;
    color: #32a7c6;
    border-radius: 3px;
    line-height: 20px;
    padding: 0 8px;
    display: inline-block;
}
.metoooltip-container .dark.metoooltip-content {
    position: absolute;
    left: 50%;
}
.metoooltip-container .dark.metoooltip-content, .metoooltip-container .dark.metoooltip-content:before, .metoooltip-container .dark.metoooltip-content:after{
    background-color: #333;
    color: #fff; 
    font-size: 12px;
}

a.qm-cont{
    width: 100%;
    color:#333;
    position: relative;
    display: inline-block;
    padding-right: 10px;
}
a.qm-cont:after{
    content: "?";
    font-size: 9px;
    color:#31a5c3;
    width:15px;
    height:15px;
    border-radius: 50%;
    border:1px solid #31a5c3;
    text-align: center;
    line-height: 14px;
    position: absolute;
    right:-16px;
    top:3px;
}
a.qm-cont:before{
    content:"";
    background: #fff;
    border-radius: 3px;
    position: absolute;
    top:-5px;
    bottom: -5px;
    left:-15px;
    right:-26px;
    z-index:0;
    -webkit-transition: background linear .2s;
    transition: background linear .2s;
}
a.qm-cont:hover:before{
    content:"";
    background: #F0F5F6;
    -webkit-transition: background linear .2s;
    transition: background linear .2s;
}
a.qm-cont span{
    position: relative;
    z-index: 1;
}
.icon-with-caption {
    height: 80px;
}
.pricewrap {
    height: 52px;
    position: relative;
}
.price.switch input[type=checkbox] + label{
    background: #ccc;
    -webkit-transition: background .2s linear;
    transition: background .2s linear;
}
.price.switch input[type=checkbox]:checked + label {
    background: #32a7c6;
    -webkit-transition: background .2s linear;
    transition: background .2s linear;
}
span.switch-off {
    position: absolute;
    left: 5px;
    top: 10px;
    color: #333;
    font-weight: bold;
    font-size: 9px;
}
span.switch-on {
    position: absolute;
    left: -115px;
    top: 10px;
    color: #333;
    font-weight: bold;
    font-size: 9px;
    min-width:114px;
}
.landing section.feat.pricing{
    overflow-x: hidden!important;
    margin-bottom: -200px;
    z-index: 12; 
}

.feat .flexbox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.feat .flexbox .col {
    flex: 1;
    -webkit-flex: 1;
    transition: transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
    position: relative;
    padding-bottom:70px;
    padding-top: 20px;
    z-index:2;
}

.feat .flexbox .col:hover {
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    transform: -webkit-translateY(-10px);
}

.feat .flexbox .col .button{
    width: 130px;
    padding: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform:translateX(-50%);
}

.feat .flexbox .col:nth-child(2) {
    margin:-20px 15px;
    z-index: 1;
}

.price.fade{
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.price.fade span s{
    font-weight: 100;
    margin-left: 5px;
}

.button.toggle{
    width:100px;
    padding:0;
    margin:0;
    position: relative;
}

.button.toggle span{
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.plans table{
    width:100%;
    border:none;
    text-align: center;
}

.plans table th,.plans table td{
    background: #fff;
    text-align: center;
    padding:15px;
    border-bottom: 1px solid #eee;
}

.plans table tr td:first-child{
    color: #163F50;
    font-weight: bold;
    text-align: left;
}

.plans th h2,
.feat .flexbox h2,
.vert-adv-banner h2{
    height:51px;
}
.vert-adv-banner .switch{
    display: none;
}
.icon-list li, .list li{
    margin-bottom: 10px;
    position: relative;
}

.vert-adv-banner .icon-list li{
    text-align: center;
}

.icon-list .icon {
    position: absolute;
    right: -7px;
    top: 0;
}

.dash section.explore{
    margin-bottom:-7px;
}

.notification a.fa{
    line-height: 45px;
}




/*** FRONT FOOTER ***/

.metooo-pro .hiddenfooter{
    display: none;
}

.metooo-pro .userfooter{
    margin-bottom:100px;
}

.metooo-wl .hiddenfooter{
    display: none;
}

.metooo-wl .userfooter span.circle{
    display: none;
}


/*** ANIMATION DELAY AND WP***/

.delay-05s {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.wp1, .wp2, .wp3, .wp4, .wp5, .wp6, .wp7, .wp8,.wp9{
    visibility: hidden;
}
.bounceInLeft, .bounceInRight, .bounceInUp, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight, .bounceInDown {
    visibility: visible;
}


.f-dropdown#currency{
    width: auto;
    min-width: 200px;
}

form li label:last-child{
    margin-bottom: 0;
}
form.tip,div.tip{
    padding-top:10px;
    top: -2px;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
}
form.tip:after,div.tip:after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: inset 7px;
    border-color: transparent transparent #163f50;
    border-bottom-style: solid;
    position: absolute;
    top: -12px;
    left: 50%;
    z-index: 87;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
div.tip a{
    padding:10px 15px;
    color:#fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -moz-transition: background .2s linear;
    transition: background .2s linear;
}
div.tip a:hover{
    background:rgba(0,0,0,0.4);
}
div.tip .active{
    background:rgba(0,0,0,0.3);
}
form.tip input[type=radio] {
    margin: 0 5px 0 0;
}
.blue-2 label{
    color:#fff;
}

form.tip li {
    padding-bottom: 10px;
}

.button.block {
    padding: 0;
    border: 2px solid rgba(255,255,255,.5);
    background: rgba(255,255,255,.2);
    margin: 0 auto;
}
    
.button.block:hover,.button.block:focus {
    background: rgba(255,255,255,.4);
    border: 2px solid rgba(255,255,255,.5);
}
    
    
/*** MEDIA QUERIES ***/

@media only screen and (min-width: 640px){
  .fake-table-wrap p{
    margin: 0!important;
  }
}

@media screen and (max-width: 2000px){
    .mdl-res-fx{
        position: relative;
        top:-100px;
    }
}
@media screen and (max-width: 1600px){
    .mdl-res-fx{
        position: relative;
        top:-80px;
    }
}
@media screen and (max-width: 1200px){
    .generic2 .mockup{
        bottom: -220px;
    }

    .homepage .mockup.right.raw{
        width:600px;
    }
    .homepage .mockup.right.raw .bars{
        width: 600px;
    }
    ul.features.long li > *{
        margin-left:20px;
}
    ul.features.long li:after,
    ul.features.long li:before{
        content: none;
    } 
}
@media screen and (min-width: 1024px){
    .homepage .img-3-q.text-left{
        min-height: 600px;
    }
        .exemples ul.slick-dots {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(10px);
}

        .exemples.blue-1 ul.slick-dots li {
            float: none;
        }
}
@media screen and (max-width: 1024px){  /* ipad landscape */
    .wd section.home {
        background: url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/croppedesk.jpg) center bottom -50px no-repeat!important;
        background-size: 215%!important;
    }
    .pd0.long .pdn-tp-90,
    .pd0.long .pdn-tp-90,
    .pd0.long .pdn-tp-100,
    .pd0.long .pdn-tp-100 {
        padding-top: 100px;
    } 
    .homepage .img-3-q {
        background-size: initial;
        background-attachment: initial;
    }
    .info.homeicons .centered{
        text-align:left;
    }
    .info.homeicons{
        height:auto;
    }
    .info.homeicons p{
        margin-bottom:30px;
    }
    .mockup{
        bottom: -185px;
    }
    .focustitle{
        position: relative;
        top: 5px;
    }
    .gradientleft{
        display: none;
    }
    ul.features li:after,
    ul.features li:before{
        content: none;
    }
    ul.features{
        text-align:center;
        margin:20px auto -60px auto;
    }
    ul.features.long{
        text-align:left;
    }
    .info img.shadow{
        width:100%;
    }

    img.featdx {
        margin-right: 0;
        float: none;
    }
    .gradientbtm:after {
        left: 0;
        right: 0;
    }
    ul.features{
        margin-bottom: 0;
    }
    ul.features.long li{
        margin-top: 0;
    }
    ul.features.long li > *{
        margin-left:0;
    }
    .info.icons a img{
        max-height: 40px;
    }
    .compare .price:not(.min):not(.max){
        margin-left:15px;
    }
}


@media screen and (max-width: 768px){ /* ipad portrait */
    .mdl-res-fx{
        position: relative;
        top:0;
    }
    .home{
        background: url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/site/festival.jpg) no-repeat!important;
    }
    header[role='desktop'] a.logo {
        width: 78px;
    }
    header .top-bar-section ul li:not(.has-form) a:not(.button), header .top-bar-section ul li:not(.has-form) a:hover:not(.button) {
        border:none;
    }
    h1.m {
        font-size: 30px;
        line-height:45px;
    }

    .feat h1 {
        margin-bottom: 0!important;
    }

    h1.w-l{
        font-size:40px; 
    }
    p.w{
        font-size:16.8px;   
    }
    h3.xl, .info h3.xl{
        font-size:23px;
        margin-bottom: 20px!important;
    }
    .mockup{
        bottom: -140px;
    }
    img.headerimg{
        max-width:320px;
    }
    .homepage .mockup.collage{
        display: none;
    }
    .homeicons.sx article, .homeicons.sx ul, .tools article,.tools ul{
        padding-left: 0.9375rem;
        padding-right: 0.9375rem;
    }
    .homeicons.sx article, .homeicons.sx li, .tools article,.tools ul li{
        padding-left:0;
        background: none!important;
    }
    .feat .flexbox {
        display:block;
        display: block;
        display: block;
    }

    .feat .flexbox .col:nth-child(1),
    .feat .flexbox .col:nth-child(2),
    .feat .flexbox .col:nth-child(3) {
        margin:15px;
        padding:20px;
    }

    .tools li div.relative, .tools li.relative div{
        padding: 0 0 0 15px;
    }

    .tools li.relative:after{
        left:0;
        right:0;
    }
}
@media screen and (max-width: 667px){ /* iphone6 landscape */
    section.img-3-q{
        height:100%;
        padding:20px 0;
    }
    section.img-3-q .pdn-tp-70{
        padding-top:0!important;
        display:table-cell;
        vertical-align: middle;
    }
    .mockup{
        display: none;
    }
    .gradientbtm:after{
        content:none;
    }
    .info.homeicons{
        padding:50px 0;
    }
    .info.homeicons li{
        margin-bottom:20px!important;
    }
    .homeicons.sx article, .tools article, .tools ul li{
        text-align: left;
    }
    .tools article:nth-child(2), .tools ul li:first-child{
        background-size: 35px auto;
    }
    .tools ul li:not(:first-child):not(:last-child){
        background-size: 35px auto;
    }
/*     h3.xl.line:after{
        content: none;
    } */


    .homeicons.text-center li:not(:last-child):after{
        content:none;

    }
    .info.icons a{
        display: block;
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 640px){
  .fake-table-wrap .row:first-child{
    margin-top: 15px;
  }
 
  ul.icon-list{
  	padding:0 20px;
}
}

@media screen and (max-width: 375px){ /* iphone6 portrait */
    .wd section.home h3.g{
        margin-bottom: 10px;
    }
    .wd section.home hr,
    .generic section.home hr{
        margin: 0;
    }

    .devices ul{
        display:none;
    }
    .pd0 .auth_dialog p.social a{
        display: block;
        width:100%;
        float:none;
        clear:both;
        margin:0 0 20px 0;
    }
}
@media screen and (max-width: 320px){ /* smaller devices */
    .home{
        padding:0;
    }
}

/* LANDING */

.landing section.feat:before, .landing section.gradient:before, .landing section.img-full:before{
    z-index:-10;
}
section.bg-color-2.cut:before{
    content:"";
    background: transparent url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/img/landing-topics/cut_bg.svg) no-repeat;
    background-size: cover;
    position: absolute;
    top: -400px;
    height: 400px;
    left: 0;
    right: 0;
    z-index: 0;
}
section.info.no-bg{
    z-index: 20;
    position: relative;
    background-color: transparent!important;
}
.radius-20{
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
img.landing-icons{
    height:50px;
    width:auto;
}

img.semifullw{
    width:90%!important;
}

ul.landing-icons{
    margin:0;
    list-style-type: none;
}

.landing-icons li span:first-child{
    height:50px;
    width:80px;
    margin-bottom: 30px;
    display: block
}

.landing-icons li:first-child span:first-child{
    background: transparent url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/img/landing-topics/computer.svg) no-repeat;
    background-size: 100%;
}
.landing-icons li:nth-child(2) span:first-child{
    background: transparent url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/img/landing-topics/envelope.svg) no-repeat;
    background-size: 59%;
}
.landing-icons li:nth-child(3) span:first-child{
    background: transparent url(https://s3-eu-west-1.amazonaws.com/cdn.metooo.it/static/img/landing-topics/tickets.svg) no-repeat;
    background-size: 74%;
    
}
footer.new.multicolumns span, footer.new.multicolumns ul:not(.social) a {
    line-height: 1.6;
    font-size: 12px;
}
footer.new ul.vertical li{
    display: block;
    text-align: left!important;
}



@media screen and (max-width: 1024px){
    footer.new.multicolumns .columns, footer.new.multicolumns .columns ul.social {
        text-align: left!important;
    }
    footer.new ul.vertical{
        margin-bottom:10px;
    }
    }


@media screen and (max-width: 768px){
    section.bg-color-2.cut{
        margin-top:90px;
    }   
    .landing section.feat{
        background-attachment: initial;
    }
}